{extend name="/public/base" /}
{block name="content"}
<!-- Hero Section Begin -->
<section class="hero">
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <div class="hero__categories">
                    <div class="hero__categories__all">
                        <i class="iconfont icon-navicon"></i>
                        <span>全品类</span>
                    </div>
                    <ul>
                        {for start="1" end="11"}
                        <li><a href="JavaScript:;">测试{$i}</a></li>
                        {/for}
                    </ul>
                </div>
            </div>
            <div class="col-lg-9">
                <div class="hero__search">
                    <div class="hero__search__form">
                        <form action="#">
                            <!--                            <div class="hero__search__categories">-->
                            <!--                                全部分类-->
                            <!--                                <span class="arrow_carrot-down"></span>-->
                            <!--                            </div>-->
                            <input type="text" placeholder="您需要什么?">
                            <button type="submit" class="site-btn">搜索</button>
                        </form>
                    </div>
                    <div class="hero__search__phone">
                        <div class="hero__search__phone__icon">
                            <i class="iconfont icon-dianhua" style="font-size: 25px"></i>
                        </div>
                        <div class="hero__search__phone__text">
                            <h6>400-8888-8888</h6>
                            <span>24*7 客服支持</span>
                        </div>
                    </div>
                </div>
                <!--                <div class="hero__item set-bg" data-setbg="/static/shop/img/hero/banner.jpg">-->
                <!--                    <div class="hero__text">-->
                <!--                        <span>个人 测试</span>-->
                <!--                        <h2>测试网站 <br/>请勿使用</h2>-->
                <!--                        <p>个人开发测试专用站点</p>-->
                <!--                        <a href="javascript:;" id="dev-click" class="primary-btn">请勿点击</a>-->
                <!--                    </div>-->
                <!--                </div>-->
                <div class="layui-carousel" id="test1">
                    <div carousel-item>
                        <div><img src="/static/shop/img/hero/banner.jpg"></div>
                        <div>条目2</div>
                        <div>条目3</div>
                        <div>条目4</div>
                        <div>条目5</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Hero Section End -->

<!-- Categories Section Begin -->
<section class="categories">
    <div class="container">
        <div class="row">
            <div class="categories__slider owl-carousel">

                {for start="1" end="6"}
                <div class="col-lg-3">
                    <div class="categories__item set-bg" data-setbg="/static/shop/img/categories/cat-{$i}.jpg">
                        <h5><a href="#">测试热门{$i}</a></h5>
                    </div>
                </div>
                {/for}

            </div>
        </div>
    </div>
</section>
<!-- Categories Section End -->

<!-- Featured Section Begin -->
<section class="featured spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-title">
                    <h2>支付测试</h2>
                </div>
                <div class="featured__controls">
                    <ul>
                        <li class="active" data-filter="*">全部</li>
                        <li data-filter=".oranges">蔬菜</li>
                        <li data-filter=".fresh-meat">肉蛋</li>
                        <li data-filter=".vegetables">水果</li>
                        <li data-filter=".fastfood">主食</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row featured__filter">

            {for start="1" end="9"}
            <div class="col-lg-3 col-md-4 col-sm-6 mix oranges fresh-meat">
                <div class="featured__item">
                    <div class="featured__item__pic set-bg" data-setbg="/static/shop/img/featured/feature-{$i}.jpg">
                        <ul class="featured__item__pic__hover">
                            <li><a href="javascript:;"><i class="iconfont icon-aixin_shixin"></i></a></li>
                            <li><a href="javascript:;"><i class="iconfont icon-fenxiang1"></i></a></li>
                            <li><a href="javascript:;"><i class="iconfont icon-gouwucheman"></i></a></li>
                        </ul>
                    </div>
                    <div class="featured__item__text">
                        <h6><a href="#">测试商品{$i}</a></h6>
                        <h5>￥{$i}0.00</h5>
                    </div>
                </div>
            </div>
            {/for}

        </div>
    </div>
</section>
<!-- Featured Section End -->

<!-- Banner Begin -->
<div class="banner">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6">
                <div class="banner__pic">
                    <img src="/static/shop/img/banner/banner-1.jpg" alt="">
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <div class="banner__pic">
                    <img src="/static/shop/img/banner/banner-2.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Banner End -->

<!-- Latest Product Section Begin -->
<section class="latest-product spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-6">
                <div class="latest-product__text">
                    <h4>最新上架</h4>
                    <div class="latest-product__slider owl-carousel">

                        {for start="1" end="3" name="j"}
                        <div class="latest-prdouct__slider__item">

                            {for start="1" end="4"}
                            <a href="#" class="latest-product__item">
                                <div class="latest-product__item__pic">
                                    <img src="/static/shop/img/latest-product/lp-{$i}.jpg" alt="">
                                </div>
                                <div class="latest-product__item__text">
                                    <h6>最新上架{$i*$j}</h6>
                                    <span>￥30.00</span>
                                </div>
                            </a>
                            {/for}

                        </div>
                        {/for}

                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="latest-product__text">
                    <h4>热销商品</h4>
                    <div class="latest-product__slider owl-carousel">

                        {for start="1" end="3" name="j"}
                        <div class="latest-prdouct__slider__item">

                            {for start="1" end="4"}
                            <a href="#" class="latest-product__item">
                                <div class="latest-product__item__pic">
                                    <img src="/static/shop/img/latest-product/lp-{$i}.jpg" alt="">
                                </div>
                                <div class="latest-product__item__text">
                                    <h6>热销商品{$i*$j}</h6>
                                    <span>￥30.00</span>
                                </div>
                            </a>
                            {/for}

                        </div>
                        {/for}

                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="latest-product__text">
                    <h4>品质商品</h4>
                    <div class="latest-product__slider owl-carousel">

                        {for start="1" end="3" name="j"}
                        <div class="latest-prdouct__slider__item">

                            {for start="1" end="4"}
                            <a href="#" class="latest-product__item">
                                <div class="latest-product__item__pic">
                                    <img src="/static/shop/img/latest-product/lp-{$i}.jpg" alt="">
                                </div>
                                <div class="latest-product__item__text">
                                    <h6>品质商品{$i*$j}</h6>
                                    <span>￥30.00</span>
                                </div>
                            </a>
                            {/for}

                        </div>
                        {/for}

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Latest Product Section End -->

<!-- Blog Section Begin -->
<!--<section class="from-blog spad">-->
<!--    <div class="container">-->
<!--        <div class="row">-->
<!--            <div class="col-lg-12">-->
<!--                <div class="section-title from-blog__title">-->
<!--                    <h2>From The Blog</h2>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="col-lg-4 col-md-4 col-sm-6">-->
<!--                <div class="blog__item">-->
<!--                    <div class="blog__item__pic">-->
<!--                        <img src="/static/shop/img/blog/blog-1.jpg" alt="">-->
<!--                    </div>-->
<!--                    <div class="blog__item__text">-->
<!--                        <ul>-->
<!--                            <li><i class="fa fa-calendar-o"></i> May 4,2019</li>-->
<!--                            <li><i class="fa fa-comment-o"></i> 5</li>-->
<!--                        </ul>-->
<!--                        <h5><a href="#">Cooking tips make cooking simple</a></h5>-->
<!--                        <p>Sed quia non numquam modi tempora indunt ut labore et dolore magnam aliquam quaerat </p>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="col-lg-4 col-md-4 col-sm-6">-->
<!--                <div class="blog__item">-->
<!--                    <div class="blog__item__pic">-->
<!--                        <img src="/static/shop/img/blog/blog-2.jpg" alt="">-->
<!--                    </div>-->
<!--                    <div class="blog__item__text">-->
<!--                        <ul>-->
<!--                            <li><i class="fa fa-calendar-o"></i> May 4,2019</li>-->
<!--                            <li><i class="fa fa-comment-o"></i> 5</li>-->
<!--                        </ul>-->
<!--                        <h5><a href="#">6 ways to prepare breakfast for 30</a></h5>-->
<!--                        <p>Sed quia non numquam modi tempora indunt ut labore et dolore magnam aliquam quaerat </p>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="col-lg-4 col-md-4 col-sm-6">-->
<!--                <div class="blog__item">-->
<!--                    <div class="blog__item__pic">-->
<!--                        <img src="/static/shop/img/blog/blog-3.jpg" alt="">-->
<!--                    </div>-->
<!--                    <div class="blog__item__text">-->
<!--                        <ul>-->
<!--                            <li><i class="fa fa-calendar-o"></i> May 4,2019</li>-->
<!--                            <li><i class="fa fa-comment-o"></i> 5</li>-->
<!--                        </ul>-->
<!--                        <h5><a href="#">Visit the clean farm in the US</a></h5>-->
<!--                        <p>Sed quia non numquam modi tempora indunt ut labore et dolore magnam aliquam quaerat </p>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->
<!-- Blog Section End -->
{/block}
<!--<script src="/static/shop/js/carousel.js" type="text/javascript"></script>-->
<!--<script src="{:getVersionNumber('/static/shop/js/layer.js')}" type="text/javascript"></script>-->
{block name="js"}

<script>
    $('#dev-click').click(function () {
        layer.msg('请勿点击');
    });

    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1',
            width: '100%',
            height: '431px',
            arrow: 'hover',
            indicator: 'none',
            anim: 'fade',
            // ,interval: 5000
        });
    });
</script>
{/block}